<template>
  <el-select
    v-model="majorId"
    placeholder="请选择"
    :props="defaultProps"
    :treeData="majorTree">
    <el-option
      v-for="item in majorTree"
      :key="item.id"
      :label="item.name"
      :value="item.id">
    </el-option>
  </el-select>
</template>
<script lang="ts" setup>

import {
  getCurrentInstance, ref, onMounted, defineProps, computed, withDefaults,
} from 'vue';

const { proxy } = getCurrentInstance(); // 使用proxy代替ctx，因为ctx只在开发环境有效
  // 加载部门属性菜单
  interface Tree { // 树形接口类型
    id:number;
    name: string;
    children?: Tree[];
  }
  // 获取父组件传递过来的值，主要用于部门模块
  // const table = inject<TableData>('table'); // 表格信息
  // 获取父组件传递过来的值
  interface Props {
    // modelValue: any,
    data?: Tree[],
  }
const props = withDefaults(defineProps<Props>(), {
  // modelValue: () => null,
});
const defaultProps = { // 部门树形菜单显示标签对应的属性名
  value: 'id',
  label: 'name',
  children: 'children',
};

// 从服务端获取部门树形菜单数据
const majorTree = ref<Tree[]>();// 定义部门树形菜单
const getDepartmentTree = async () => { // 读取部门树形菜单
  const resData:any = await new proxy.$Request(proxy.$urls.API_URL_BACKSTAGE_SCHOOLMAJOR_MANAGE).get();
  if (resData.success) {
    majorTree.value = resData.data.data;
  }
};
  // 如果没有树形列表的数据传入，则从服务端获取
if (typeof props.data === 'undefined') { // 如果没有值传进来
  onMounted(getDepartmentTree);
}

// 对部门属性进行监听
const majorId = computed({
  get() { // 不能在get里面改变nodeName.value的值，所以在watch里面进行修改
    // nodeName.value=treeRef.value.getNode(props.modelValue).data["name"];
    return props.data;
  },
  set(val) {
    proxy.$emit('update:modelValue', val);// 则传递给父组件
  },
});
</script>
